<template>
      <main-layout>
      <!--二级导航 -->
      <nav-list 
      :routeListData='routeListData'
      slot='navList'
      id="nav2"
      >
      </nav-list>
      <!--统计-->
        <statistics-table 
          v-if="statisticsApi"
          :api='statisticsApi'
          slot='other'
        >
        </statistics-table>
      <main slot='main'>
      <!--搜索-->
        <el-row id="searchTable">
          <el-form ref='search' :inline="true"
          :model="searchForm">
            <transition-group name="list-complete" mode="out-in" tag="div">
              <el-col :span="4" :key='1' class="list-complete-item">
                <el-form-item>
                  <el-input v-model="searchForm.userName" placeholder='搜索用户名'></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4" :key='2' class="list-complete-item">
                <el-form-item>
                  <el-input v-model="searchForm.account" placeholder='搜索账号'></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4" v-if="currentParam('offen-user')" :key='3' class="list-complete-item">
                <el-form-item>
                  <el-input placeholder='搜索设备号'></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6" :key='4' class="list-complete-item">
                <el-button-group>
                  <el-form-item>
                    <el-button class="xl-btn" icon="search">查询</el-button>
                    <el-button class="xl-btn" title="导出excel">导出<i class="el-icon-document el-icon--right"></i>
                    </el-button>
                  </el-form-item>
                </el-button-group>
              </el-col>
            </transition-group>
          </el-form>
        </el-row>
        <pkg2-table 
          @getNextPageData="getNextPageData" 
          :tableData='tableData'
          :tableMeta='tableMeta'
          :currentPage='currentPage'
          :pagination='pagination'
          :loading='loading'
          :tableHeight = 'tableHeight'
          ref='table'
        >
          <template slot="special" v-if="showIn(['vip','reg','offen-user'])">
            <el-table-column
              label="详情"
              width="75"
              prop="uid"
              fixed="right"
              >
              <template scope="scope">
              <router-link :to="{path:'/user-detail/test-data',query:{uid:scope.row.uid}}">查看</router-link>
              </template>
          </el-table-column>
          </template>
          <template v-if="currentParam('reg')" slot="special2">
            <el-table-column
              label="操作"
              width="120"
              fixed="right"
            >
              <template scope="scope">
                <router-link :to="{name:'msg-reply',query:{uid:scope.row.uid}}" >在线帮助</router-link>
                <el-button size='mini'
                  @click="editUser(scope.row)"
                >更新资料</el-button>
                <el-button size="mini" @click="addKinsfolkDialog(scope.row)">添加亲友</el-button>
              </template>
            </el-table-column>
          </template>
        </pkg2-table>
        <!--添加亲友dialog -->
      <el-dialog
        ref="addKinsfolk"
        :visible.sync="showAddKinsfolk"
        size="tiny"
        title="添加亲友"
      >
        <el-form :model="addKinsfolk"
        ref="addKinsfolkForm"
        >
          <el-form-item label="亲友姓名">
          <el-input v-model="addKinsfolk.name"></el-input>
          </el-form-item>
        <el-form-item label="亲友账号">
          <el-input v-model="addKinsfolk.account"></el-input>
        </el-form-item>
        <sex-radio
         v-model="addKinsfolk.sex"
         ></sex-radio>
        <el-form-item label="亲友关系">
          <el-input v-model="addKinsfolk.relationship"></el-input>
        </el-form-item>
        <el-button size="mini" @click="addKinsfolkSubmit">添加</el-button>
        </el-form>
      </el-dialog>

      <el-dialog title="编辑用户个人资料" :visible.sync="showEditUser" size="tiny" ref="editUserDia"
      top='5%'
      >
        <el-form :model="editUserForm" ref="editUserForm">
          <el-form-item label="用户账号"
          >
            <el-input v-model="editUserForm.account" :value="editUserForm.account"></el-input>
          </el-form-item>
          <el-form-item label="用户姓名">
            <el-input
            v-model="editUserForm.name"
            ></el-input>
          </el-form-item>
          <sex-radio
          v-model="editUserForm.sex"
          ></sex-radio>
          <el-form-item label="联系方式">
            <el-input
            v-model="editUserForm.contact"
            ></el-input>
          </el-form-item>
          <el-form-item label="出生日期">
          <el-date-picker
            v-model="editUserForm.birth"
            align="right"
            type="date"
            placeholder="选择日期"
            >
          </el-date-picker>
          </el-form-item>
          <el-form-item label="地址">
            <el-input
            v-model="editUserForm.address"
            ></el-input>
          </el-form-item>
          <el-form-item label="身高">
            <el-input
            v-model="editUserForm.height"
            ></el-input>
          </el-form-item>
          <el-form-item label="体重">
            <el-input
            v-model="editUserForm.weight"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="updateUserInfo">更新</el-button>
        </div>
      </el-dialog>
      <el-dialog title="修改服务医生" size='tiny' ref='changeDoctor'>
        <p>用户账号:{{account}}</p>
        <p>用户姓名:{{name}}</p>
        <cascader
          expand-trigger="hover"
        ></cascader>
      </el-dialog>
      </main>
      </main-layout>
</template>

<script>
import statisticsTable from '../../components/nav2statistics'
import navList from '../../components/defaultNavList'
import mainLayout from '../../layout/main-container-layout'
import pkg2Table from '../../components/pkg2Table'
import tableMixin from '../../mixins/tableMixin'
import sexRadio from '../../components/sexRadio'

export default{
  name: 'user',
  mixins: [tableMixin],
  components: {
    mainLayout,
    navList,
    statisticsTable,
    pkg2Table,
    sexRadio
  },
  data () {
    return {
      area:[
        {
          value:'gz',
          label:'广州',
          children:[
            {
              value:'zs',
              label:'中山',
              children:[
                {
                  value:'sq',
                  label:'石岐'
                },
                {
                  value:'hjkfq',
                  label:'火炬开发区'
                }
              ]
            },
            {
              value:'sz',
              label:'深圳',
              children:[
                {
                  value:'nsq',
                  label:'南山区'
                }
              ]
            }
          ]
        },
        {
          value:'cq',
          label:'重庆市',
          children:[
            {
              value:'csq',
              label:'长寿区'
            }
          ]
        }
      ],
      showAddKinsfolk:false,
      showEditUser:false,
      addKinsfolk: {
        name: '',
        account: '',
        sex: 1,
        relationship: ''
      },
      editUserForm: {
        account: '',
        name: '',
        sex: 1,
        contact: '',
        birth: '',
        address: '',
        height: 0,
        weight: 0
      },
      searchForm: {
        userName: '',
        account: '',
        deviceNum: ''
      },
      routeListData: {
        'statistics-user':{
          text:'用户统计',
          api:'user/statistics',
          tableMeta:[
            {
              prop:'user',
              label:'用户'
            },
            {
              prop:'today',
              label:'今天'
            },
            {
              prop:'week',
              label:'本周'
            },
            {
              prop:'mouth',
              label:'本月'
            },
            {
              prop:'total',
              label:'总计'
            }
          ]
        },
        'reg': {
          text: '注册会员',
          // exact: true,
          api: 'user/reg',
          tableMeta: [
            {
              prop: 'index',
              label: '序号',
              sortable: true,
              fixed: 'left',
              width: '90'
            },
            {
              prop: 'name',
              label: '用户',
              sortable: true,
              fixed: 'left',
              width: '90'
            },
            {
              prop: 'account',
              label: '账号',
              fixed: 'left',
              sortable: true,
              width: '160'
            },
            {
              prop: 'phoneArea',
              label: '手机归属地',
              width: '200'
            },
            {
              prop: 'sex',
              label: '性别',
              width: '70'
            },
            {
              prop: 'address',
              label: '地址',
              width: '260'
            },
            {
              prop: 'regTime',
              label: '注册时间',
              width: '200'
            },
            {
              prop: 'regfrom',
              label: '注册来源',
              width: '260'
            },
            {
              prop: 'attention',
              label: '我的关注',
              width: '200'
            },
            {
              prop: 'follow',
              label: '关注我的',
              width: '200'
            }
          ],
          statistics:'/userStatisData/reg'
        },
        'offen-user': {
          text: '常用户',
          api: 'user/offen',
          tableMeta: [
            {
              prop: 'index',
              label: '序号',
              sortable: true,
              width: '90',
              fixed: 'left',
            },
            {
              prop: 'name',
              label: '用户',
              sortable: true,
              width: '90',
              fixed: 'left'
            },
            {
              prop: 'account',
              label: '账号',
              fixed: 'left',
              width: '150',
              sortable: true
            },
            {
              prop: 'phoneArea',
              width: '200',
              label: '手机归属地'
            },
            {
              prop: 'testData',
              label: '检测数据'
            },
            {
              prop: 'device',
              label: '链接设备'
            },
            {
              prop: 'sex',
              width: '70',
              label: '性别'
            },
            {
              prop: 'address',
              width: '260',
              label: '地址'
            },
            {
              prop: 'regtime',
              width: '200',
              label: '注册时间'
            },
            {
              prop: 'regfrom',
              width: '260',
              label: '注册来源'
            },
            {
              prop: 'attention',
              width: '200',
              label: '我的关注'
            },
            {
              prop: 'follow',
              width: '200',
              label: '关注我的'
            }
          ],
          statistics:'/userStatisData/offen-user'
        },
        'vip': {
          text: '星级会员',
          api: 'user/vip',
          tableMeta: [
            {
              prop: 'index',
              label: '序号',
              sortable: true,
              fixed: 'left',
              width: '90'
            },
            {
              prop: 'name',
              label: '用户',
              sortable: true,
              fixed: 'left',
              width: '90'
            },
            {
              prop: 'account',
              label: '账号',
              fixed: 'left',
              sortable: true,
              width: '150'
            },
            {
              prop: 'phoneArea',
              label: '手机归属地',
              width: '200'
            },
            {
              prop: 'testData',
              label: '检测数据'
            },
            {
              prop: 'device',
              label: '链接设备'
            },
            {
              prop: 'sex',
              label: '性别',
              width: '70'
            },
            {
              prop: 'address',
              label: '地址',
              width: '260'
            },
            {
              prop: 'regtime',
              label: '注册时间',
              width: '200'
            },
            {
              prop: 'regfrom',
              label: '注册来源',
              width: '260'
            },
            {
              prop: 'attention',
              label: '我的关注',
              width: '200'
            },
            {
              prop: 'follow',
              label: '关注我的',
              width: '200'
            }
          ],
          statistics:'/userStatisData/vip'
        }
      }
    }
  },
  methods: {
    addKinsfolkDialog (uid) {
      this.showAddKinsfolk = true
    },
    addKinsfolkSubmit () {
      console.log(this.addKinsfolk)
    },
    editUser (row) {
      console.log(row)
      // 把行数据深拷贝作为表单的初始值(解除双向绑定)
      this.editUserForm = JSON.parse
      (JSON.stringify(row))
      console.dir(this.editUserForm)
      this.showEditUser = true
    },
    updateUserInfo () {
      console.log(this.editUserForm)
    }
  },
  computed:{
    statisticsApi(){
      let params = this.$route.params.type
      return this.routeListData[params].statistics?this.routeListData[params].statistics:null
    }
  },
  created () {
    console.log(this)
  },
  mounted () {
    let vm = this
    window.onresize =
      this.throttle(() => {
        vm.defaultHeight()
      }, 200)
  },
  updated () {
    let vm = this
    vm.$nextTick(function () {
      vm.defaultHeight()
    })
  }
  // beforeRouteEnter: (to, from, next) => {
  //   console.log('组件内路由钩子enter',to,from)
  //   next(vm => {

  //   })
  // }
  // beforeRouteUpdate (to, from, next) {
  //   console.log(from)
  //   next(vm => {
  //   })
  // }
}
</script>